<template>
  <div class="app-container">
    <div class="pinpin"></div>
    <div class="jianjie">
      简介：课程简介，课程简介，课程简介，课程简介，课程简介，课程简介，课程简介，课程简介，课程简介，课程简介，课程简介，课程简介，课程简介，课程简介，
    </div>
    <div class="mulu">
      <!-- 大分类 -->
      <div class="mululist">
        <p>我是第一章</p>
        <!-- 子目录 -->
        <div class="zimulu" @click="goPlay">
          <div class="title">
            <div class="icons">
              <i class="el-icon-caret-right" />
            </div>
            我是第一小节<span>（02：02）</span>
          </div>
        </div>
        <div class="zimulu" @click="goPlay">
          <div class="title">
            <div class="icons">
              <i class="el-icon-caret-right" />
            </div>
            我是第二小节
          </div>
        </div>
        <div class="zimulu" @click="goPlay">
          <div class="title">
            <div class="icons">
              <i class="el-icon-caret-right" />
            </div>
            我是第三小节
          </div>
        </div>
      </div>
      <!-- 大分类 -->
      <div class="mululist">
        <p>我是第二章</p>
        <!-- 子目录 -->
        <div class="zimulu">
          <div class="title">
            <div class="icons">
              <i class="el-icon-caret-right" />
            </div>
            我是第一小节
          </div>
        </div>
        <div class="zimulu">
          <div class="title">
            <div class="icons">
              <i class="el-icon-caret-right" />
            </div>
            我是第二小节
          </div>
        </div>
        <div class="zimulu">
          <div class="title">
            <div class="icons">
              <i class="el-icon-caret-right" />
            </div>
            我是第三小节
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { importJijia,addJijia,selectJijia,updateJijia,deleteJijia } from '@/api/waimao'
  export default {
    data(){
      return{

      }
    },
    mounted(){

    },
    methods:{
      goPlay(){
        this.$router.push({
          name: 'Playvideo'
        })
      }
    }
  }
</script>

<style scoped lang="scss">
.app-container{
  padding: 5px;
}
.jianjie{
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 10px;
  box-shadow: 0px 0px 5px rgba(0,0,0,.1);
  font-size: 14px;
  line-height: 25px;
}
.mulu{
  box-shadow: 0px 0px 5px rgba(0,0,0,.1);
  font-size: 14px;
  padding: 15px 20px;
  border-radius: 10px;
  .mululist{
    >p{
      font-size: 18px;
      font-weight: 600;
      margin: 15px 0;
    }
    .zimulu{
      display: flex;
      justify-content: space-between;
      padding: 10px;
      transition: all .5s;
      border-radius: 5px;
      cursor: pointer;
      &:hover{
        background: #85ddb2;
        // color: #fff;
        .title .icons{
          background: #18a05e;
        }
      }
      .title{
        display: flex;
        align-items: center;
        >span{
          color: #999;
        }
        .icons{
          width: 25px;
          height: 25px;
          border-radius: 50%;
          background: #999;
          color: #fff;
          font-size: 18px;
          display: flex;
          justify-content: center;
          align-items: center;
          transition: all .5s;
          margin-right: 10px;
        }
      }
    }
  }
}

</style>